<template>
  <div class="order-detail">
    <!-- 未支付订单信息 -->
    <div v-if="state==1" class="no-pay">
      <div>
        <span class="text">待付款</span>
        <div class="price-box">
          总价¥
          <em>{{99}}</em>
        </div>
      </div>
      <div>
        <div class="tip">
          请求
          <span class="tip-color">29:00</span>分钟内完成支付
        </div>
        <div>
          单价¥
          <span class="unit">99</span>
          <span>*</span>
          <span class="count">1</span>
        </div>
      </div>
    </div>
    <!-- 门票信息 -->
    <div class="ticket">
      <div class="name border-b-1px">周庄古镇(成人票)</div>
      <div class="list">
        <div class="list-item">
          <div class="label">使用日期:</div>
          <div class="text">2019-12-12 周四 07:30-16:30</div>
        </div>
        <div class="list-item">
          <div class="label">购票须知:</div>
          <div class="text">无须换票，同时携带{商家券码}和{手机号}直接入园</div>
        </div>
        <div class="list-item">
          <div class="label">入园地址:</div>
          <div class="text">江苏省苏州市平江区园林路23号景区检票处</div>
        </div>
        <div class="list-item">
          <div class="label">购买数量:</div>
          <div class="text">{{1}}张</div>
        </div>
        <div class="list-item" v-if="state==2 ">
          <div class="ticket-qr">
            <div class="ticket-qr-text">入园凭证</div>
            <div class="ticket-qr-code">2019 1233</div>
            <img class="ticket-qr-img" src="@/assets/qr.jpg" alt />
          </div>
        </div>
        <div class="list-item">
          <div class="label">退改规则:</div>
          <div class="text">游玩日截止后29天23:59前未消费可申 请退款</div>
        </div>
      </div>
    </div>
    <!-- 订单信息 -->
    <div class="order m-t-11">
      <div class="name border-b-1px">订单信息</div>
      <!-- 预定人 -->
      <div class="order-person">
        <div class="list">
          <div class="list-item" v-for="(item,index) in persons" :key="index">
            <div class="label">游玩人:</div>
            <div class="text">
              <span class="text-name">{{item.name}}</span>
              {{item.code}}
            </div>
          </div>
        </div>
      </div>
      <div v-if="persons.length>1" class="split-line border-b-1px"></div>
      <!-- 订单号码 -->
      <div class="order-code">
        <div class="list">
          <div class="list-item">
            <div class="label">订单编号:</div>
            <div class="text">
              36594454415847
              <span class="copy-btn">复制</span>
            </div>
          </div>
          <div class="list-item">
            <div class="label">支付时间:</div>
            <div class="text">2020-01-13 11:36:23</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 联系人 -->
    <div class="contact">
      <div class="name">联系人</div>
      <div class="phone">
        <span class="label">手机号</span>
        <span class="number">189****8888</span>
      </div>
    </div>
    <div class="foot">
      <template v-if="state==1">
        <button type="button" class="btn cancel" @click="cancel">取消订单</button>
        <button type="button" class="btn submit">继续支付</button>
      </template>
      <template v-if="state==2">
        <button type="button" class="btn refund">申请退款</button>
      </template>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
export default {
  data() {
    return {
      state: 1, //订单状态,是1的情况显示未支付订单信息,修改状态值*（根据config.js的配置状态信息），获得不同订单界面显示
      persons: [
        {
          name: "赵四",
          code: "513759185403597546"
        },
        {
          name: "赵四",
          code: "513759185403597546"
        }
      ]
    };
  },
  methods: {
    cancel() {
      Dialog.confirm({
        message: "确定取消该订单?",
        className: "dialog-box",
        cancelButtonColor: "#666",
        confirmButtonColor: "#666"
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.order-detail {
  padding: 15px;
  // 未支付订单
  .no-pay {
    > div {
      display: flex;
      justify-content: space-between;
      &:last-child {
        font-size: 14px;
        line-height: 42px;
        color: #999;
      }
    }
    .text {
      font-size: 16px;
      font-weight: bold;
    }
    .price-box {
      font-size: 15px;
      color: #ff3c3c;
      em {
        font-size: 18px;
      }
    }
    .tip {
      color: #999;
      .tip-color {
        color: #ff3c3c;
      }
    }
  }
  // 订单列表项通用
  .list {
    .list-item {
      display: flex;
      font-size: 14px;
      margin: 16px 0;
      .label {
        width: 65px;
        text-align: right;
        color: #ccc;
      }
      .text {
        margin-left: 13px;
        flex: 1;
        color: #3d3d3d;
        .text-name {
          margin-right: 25px;
        }
      }
    }
  }
  // 门票信息和订单信息
  .ticket,
  .order,
  .contact {
    padding: 6px 18px 8px 6px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 12px 0px rgba(205, 203, 203, 0.34);
    border-radius: 5px;
    .name {
      margin-left: 5px;
      line-height: 43px;
      font-weight: bold;
      font-size: 14px;
      color: #1e1d1d;
      @include border-b-1px(#ebebeb);
    }
  }
  .ticket-qr {
    width: 235px;
    height: 235px;
    margin: 0 auto;
    text-align: center;
    background: #f6f6f6;
    padding-top: 14px;
    > div {
      line-height: 22px;
      font-size: 15px;
      color: #262626;
    }
    .ticket-qr-img {
      margin-top: 5px;
      width: 150px;
      height: 150px;
    }
  }
  .order-code {
    .copy-btn {
      padding: 0 13px;
      color: #ffb78f;
    }
  }
  .split-line {
    padding-top: 5px;
    @include border-b-1px(#ebebeb);
  }
  // 联系人
  .contact {
    margin-bottom: 49px;
    .name {
      &::after {
        border: none;
      }
    }
    .phone {
      display: flex;
      .label {
        width: 65px;
        color: #666;
      }
      .number {
        color: #393939;
      }
    }
  }
  //底部操作
  .foot {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 49px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 11px 0px rgba(228, 228, 228, 1);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .btn {
      width: 125px;
      height: 35px;
      padding: 0;
      border-radius: 18px;
      background: transparent;
      border: none;
      font-size: 15px;
      &.cancel,
      &.refund {
        border: 1px solid #666;
        color: #666;
      }
      &.submit {
        margin: 0 17px 0 15px;
        background: linear-gradient(
          267deg,
          rgba(252, 127, 118, 1),
          rgba(255, 69, 69, 1)
        );
        box-shadow: 0px 1px 8px 0px rgba(255, 164, 164, 1);
        color: #fff;
      }
      &.refund {
        margin-right: 17px;
      }
    }
  }
}
</style>